<template>
	<view>
		<view class="ikz-top-bg">
			<image class="ikz-top-bg-img" :src="service_img"></image>
		</view>
		<view class="title_txt">
			<view class="shouhuo" @click="goback">
				<image src="/static/index/left-1.png" style="width: 56rpx;height: 56rpx;" mode=""></image>
			</view>
			<view class="miantxt">
				订单详情
			</view>
		</view>

		<view class="statusbox">
			<image src="/static/updata/daijiedan.png" v-if="infodetails.status == 0 && infodetails.type != 7"
				style="width: 45rpx;height: 45rpx;" mode="">
				<image src="/static/updata/daijiedan.png" v-if="infodetails.status == 0 && infodetails.type == 7"
					style="width: 45rpx;height: 45rpx;" mode="">
				</image>
				<image src="/static/updata/daijiedan.png" v-if="infodetails.status == 1 && infodetails.type == 7"
					style="width: 45rpx;height: 45rpx;" mode="">
				</image>
				<image src="/static/updata/jinxingzhong.png" v-if="infodetails.status == 1 && infodetails.type != 7"
					style="width: 45rpx;height: 45rpx;" mode="">
				</image>
				<image src="/static/updata/wancheng.png" v-if="infodetails.status == 2"
					style="width: 45rpx;height: 45rpx;" mode="">
				</image>
				<image src="/static/updata/quxiao.png" v-if="infodetails.status == 3"
					style="width: 45rpx;height: 45rpx;" mode="">
				</image>
				<view class="main-box" v-if="infodetails.status == 0">
					<view class="status-txt">
						待跑腿接单
					</view>
					<view class="daotime">
						如无人接单将在1:00:00后自动退款
					</view>
				</view>

				<view class="main-box" v-if="infodetails.status == 1 && infodetails.type != 7">
					<view class="status-txt">
						订单进行中
					</view>
				</view>

				<view class="main-box" v-if="infodetails.status == 1 && infodetails.type == 7">
					<view class="status-txt">
						待配送
					</view>
				</view>

				<view class="main-box" v-if="infodetails.status == 2">
					<view class="status-txt">
						订单已完成
					</view>
				</view>

				<view class="main-box" v-if="infodetails.status == 3">
					<view class="status-txt">
						订单已取消
					</view>
				</view>
				<view class="btns">
					联系管理员
				</view>
		</view>
		<view class="main-body" v-if="infodetails.type == 7">
			<view class="dingdanbox">
				<view class="titletxt">
					共下单 2件
				</view>
				<view class="itemorderbox">
					<image src="/static/supermarket/index/mar_img.png"
						style="width: 160rpx;height: 160rpx;border-radius: 16rpx;" mode=""></image>
					<view class="rightbox">
						<view class="topbox-box">
							伯牙绝弦（茉莉雪芽）
						</view>
						<view class="price-box">
							<view class="price-txt">
								￥16.00
							</view>
							<view class="num-txt">
								1件
							</view>
						</view>
					</view>
				</view>
				<view class="peisongbox">
					<view class="peisongtxt">
						配送费
					</view>
					<view class="peisongnum">
						￥2
					</view>
				</view>

				<view class="peisongbox">
					<view class="peisongtxt">
						优惠券
					</view>
					<view class="youhuinum">
						-￥0
					</view>
				</view>

				<view class="hejibox">
					合计：<text>￥20</text>
				</view>
			</view>

			<view class="shangjiabox" v-if="infodetails.type == 7">
				<view class="" style="width: 502rpx;height: 100%;display: flex;align-items: center;">
					<image src="/static/updata/shangjia.png" style="width: 110rpx;height: 110rpx;border-radius: 50%;"
						mode=""></image>
					<view class="shangjianame">
						商家名称
					</view>
				</view>

				<view class="btnssahng">
					联系商家
				</view>
			</view>

			<view class="order-box">
				<view class="itemorder">
					<view class="lefttxt">
						订单编号
					</view>
					<view class="numtxt">
						<text>158457545121242</text>
						<image src="/static/updata/fuzi.png" style="width: 24rpx;height: 24rpx;margin-left: 12rpx;"
							mode=""></image>
					</view>
				</view>
				<view class="itemorder">
					<view class="lefttxt">
						支付时间
					</view>
					<view class="numtxt">
						<text>2025-06-23 08:45:56</text>
					</view>
				</view>
				<view class="itemorder" v-if="infodetails.status == 3 || infodetails.status == 2">

					<view class="lefttxt">
						订单类型
					</view>
					<view class="numtxt">
						<text>外卖配送</text>
					</view>
				</view>
				<view class="itemorder" v-if="infodetails.status == 2 ">
					<view class="lefttxt">
						收货地址
					</view>
					<view class="numtxt">
						<text>姓名15464575540教学楼 3号教学楼302</text>
					</view>
				</view>

				<view class="itemorder" v-if="infodetails.status == 2">
					<view class="lefttxt">
						期望送达
					</view>
					<view class="numtxt">
						<text>立即送达</text>
					</view>
				</view>

				<view class="itemorder" v-if="infodetails.status == 2">
					<view class="lefttxt">
						备注
					</view>
					<view class="numtxt">
						<text>尽快送达</text>
					</view>
				</view>

				<view class="itemorder" v-if="infodetails.status == 2">
					<view class="lefttxt">
						跑腿接单时间
					</view>
					<view class="numtxt">
						<text>2025-06-23 08:45:56</text>
					</view>
				</view>
			</view>


			<view class="btns-boxs" v-if="infodetails.status == 1 && mystatus == 1">
				<view class="quxiaotxt" v-if="mystatus == 1">
					取消订单
				</view>
				<view class="wanchengding" v-if="mystatus == 1" @click="enter">
					完成订单
				</view>
			</view>

			<view class="btns-boxs" v-if="infodetails.status == 0 && mystatus == 1">
				<view class="jiedan">
					立即接单
				</view>
			</view>

			<view class="btns-boxs" v-if="infodetails.status == 2 && mystatus == 1">
				<view class="pingjiatxt" v-if="mystatus == 1" @click="pingjia">
					去评价
				</view>
				<view class="shenqign" v-if="mystatus == 1">
					申请退款
				</view>
			</view>



		</view>

		<view class="main-body" v-if="infodetails.type != 7">
			<view class="dancard" :style="{background:infodetails.type === 7?backgroundcolor:backgroundcolorfff}">
				<view class="topboxs">
					<view class="leftbox">
						<image src="/static/index/index_pt.png" v-if="infodetails.type == 1"
							style="width: 64rpx;height: 64rpx;" mode=""></image>
						<image src="/static/index/index_st.png" v-if="infodetails.type == 2"
							style="width: 64rpx;height: 64rpx;" mode=""></image>
						<image src="/static/index/index_cs.png" v-if="infodetails.type == 3"
							style="width: 64rpx;height: 64rpx;" mode=""></image>
						<image src="/static/index/index_kd.png" v-if="infodetails.type == 4"
							style="width: 64rpx;height: 64rpx;" mode=""></image>
						<image src="/static/index/index_kddj.png" v-if="infodetails.type == 5"
							style="width: 64rpx;height: 64rpx;" mode=""></image>
						<image src="/static/index/index_wn.png" v-if="infodetails.type == 6"
							style="width: 64rpx;height: 64rpx;" mode=""></image>
						<image src="/static/index/waimai.png" v-if="infodetails.type == 7"
							style="width: 64rpx;height: 64rpx;" mode=""></image>
						<view class="namebox">
							<view class="txt-txt">
								{{infodetails.type == 1?'校园跑腿':infodetails.type == 2?'食堂代买':infodetails.type == 3?'超市代买':infodetails.type == 4?'快递代取':infodetails.type == 5?'快递代寄':infodetails.type == 6?'万能帮':'外卖订单'}}
							</view>
							<view class="time-txt">
								{{infodetails.createtime}}发布
							</view>
						</view>
					</view>

					<view class="leixing-txt">
						<text style="font-size: 30rpx;font-weight: 400;">￥</text>{{infodetails.total_fee}}
					</view>
				</view>
				<view class="notesbox">
					<text style="font-weight: bold;color: #000;">备注：</text>
					<text class="notes">
						{{infodetails.remarks}}
					</text>
				</view>
				<view class="line">

				</view>

				<view class="qubox">
					<view class="quhuobox" v-if="infodetails.type < 6 || infodetails.type > 7">
						<view class="qutxt">
							取
						</view>
						<view class="starsaddress">
							{{infodetails.start}}
						</view>
					</view>

					<view class="leftline" v-if="infodetails.type < 6 || infodetails.type > 7">
					</view>

					<view class="shouhuobox" v-if="infodetails.type < 6 || infodetails.type > 7">
						<view class="shoutxt" v-if="infodetails.type == 1">
							寄
						</view>
						<view class="shoutxt" v-if="infodetails.type >= 2">
							收
						</view>
						<view class="endaddress">
							{{infodetails.destination}}
						</view>
					</view>

					<template v-if="infodetails.type == 6">
						<view class="stattime">
							<text style="color: #AFAFAF;">开始时间：</text>
							<text>{{infodetails.start}}</text>
						</view>

						<view class="endtime">
							<text style="color: #AFAFAF;">帮助地址：</text>
							<text>{{infodetails.destination}}</text>
						</view>
					</template>

					<template v-if="infodetails.type == 7">
						<view class="xiangqing">
							<text style="color: #AFAFAF;">商品详情：</text>
							<text>红烧牛肉面(单人餐)x1</text>
						</view>
					</template>

					<view class="qiwangbox" v-if="infodetails.type != 6">
						<text style="color: #AFAFAF;">期望送达：</text>
						<text>立即送达</text>
					</view>
				</view>

				<view class="line">

				</view>

				<view class="bom-bom">
					<view class="let-box">
						<image src="/static/updata/sixin.png" style="width: 38rpx;height: 38rpx;" mode=""></image>
						<view class="sixin">
							发起私信
						</view>
					</view>
					<view class="right-box">
						<image src="/static/updata/call.png" style="width: 38rpx;height: 38rpx;" mode=""></image>
						<view class="phones">
							拨打电话
						</view>
					</view>
				</view>

			</view>

			<view class="waimaibox" v-if="infodetails.type == 7">
				<view class="quhuobox">
					<view class="qutxt">
						取
					</view>
					<view class="starsaddress">
						学生餐厅-花花苑
					</view>
				</view>

				<view class="leftline">
				</view>

				<view class="shouhuobox">
					<view class="shoutxt" v-if="infodetails.type == 1">
						寄
					</view>
					<view class="shoutxt" v-if="infodetails.type >= 2">
						收
					</view>
					<view class="endaddress">
						{{infodetails.destination}}
					</view>
				</view>
			</view>

			<view class="shangjiabox" v-if="infodetails.type == 7">
				<view class="" style="width: 502rpx;height: 100%;display: flex;align-items: center;">
					<image src="/static/updata/shangjia.png" style="width: 110rpx;height: 110rpx;border-radius: 50%;"
						mode=""></image>
					<view class="shangjianame">
						商家名称
					</view>
				</view>

				<view class="btnssahng">
					联系商家
				</view>



			</view>
			<view class="statuss" v-if="infodetails.status == 0">
				—— 暂无人接单 ——
			</view>
			<view class="statuss" v-if="infodetails.status == 3 ||infodetails.status == 2 || infodetails.status == 1 ">
				—— 接单人 ——
			</view>

			<view class="jiedanpop"
				v-if="infodetails.status == 3 ||infodetails.status == 2 || infodetails.status == 1 ">
				<image src="/static/updata/jiedanpop.png" style="width: 110rpx;height: 110rpx;border-radius: 50%;"
					mode=""></image>
				<view class="nametxt">
					我是彭于晏
				</view>
				<view class="caozuobox">
					<view class="sixin">
						私信
					</view>
					<view class="phones">
						电话
					</view>
				</view>
			</view>

			<view class="order-box">
				<view class="itemorder">
					<view class="lefttxt">
						订单编号
					</view>
					<view class="numtxt">
						<text>{{infodetails.order_no}}</text>
						<image src="/static/updata/fuzi.png" style="width: 24rpx;height: 24rpx;margin-left: 12rpx;"
							mode=""></image>
					</view>
				</view>
				<view class="itemorder">
					<view class="lefttxt">
						支付时间
					</view>
					<view class="numtxt">
						<text>{{infodetails.pay_time}}</text>
					</view>
				</view>

				<view class="itemorder"
					v-if="infodetails.status == 3 || infodetails.status == 2 || infodetails.status == 1 ">
					<view class="lefttxt">
						接单时间
					</view>
					<view class="numtxt">
						<text>{{infodetails.receive_time}}</text>
					</view>
				</view>
				<view class="itemorder" v-if="infodetails.status == 2 ">
					<view class="lefttxt">
						完成时间
					</view>
					<view class="numtxt">
						<text>{{infodetails.complete_time}}</text>
					</view>
				</view>

				<view class="itemorder" v-if="infodetails.status == 3">
					<view class="lefttxt">
						取消时间
					</view>
					<view class="numtxt">
						<text>{{infodetails.cancel_time}}</text>
					</view>
				</view>
			</view>


			<view class="" style="width: 100%;height: 186rpx;" v-if="infodetails.type == 7">

			</view>

			<view class="btns-boxs" v-if="infodetails.status == 0">
				<view class="jiedan" v-if="mystatus == 0">
					立即接单
				</view>
				<view class="myquxiaobox" v-if="mystatus == 1" @click="cancel">
					取消订单
				</view>
				<view class="myzengjiabox" v-if="mystatus == 1" @click="zengjia">
					增加跑腿费
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="popzengjia">
				<view class="title">
					增加跑腿费
				</view>
				<view class="inpbox">
					<input type="number" placeholder="输入增加金额" /><text style="margin-right: 28rpx;">元</text>
				</view>

				<view class="enterbox">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import ikz from '@/pages/Common/tools.js';
	export default {
		data( ) {
			return {
				service_img: '/static/updata/detailsimg.png',
				status: 7, //1 校园跑腿  2 食堂代买  3 超市代买 4 快递代取 5 快递代寄 6 万能帮 7 外卖订单
				code: 3, //1 待跑腿接单 2 订单进行中 3 已完成 4 订单已取消
				mystatus: 1, // 0 别人的订单  1 我的订单
				backgroundcolor: 'linear-gradient( 180deg, #247EFF 0%, #B8D5FF 8%, #FFFFFF 21%, #FFFFFF 100%);',
				backgroundcolorfff: '#fff',
				id: null,
				infodetails: ''
			};
		},
		onLoad( op ) {
			this.id = op.id
		},
		onShow( ) {
			this.init( )
		},
		methods: {
			init( ) {
				var path = '/xyb/Order/detail';
				var data = {
					agent_id: uni.getStorageSync( 'default_agent' ).id,
					id: this.id,
					token: uni.getStorageSync( 'local_user_session' )
				};
				ikz.requestPost( path, data, res => {
					console.log( res, '轮播图' );
					if ( res.data.code == 1 ) {
						this.infodetails = res.data.data
						console.log( this.infodetails, 'this.infodetails' );
					} else {
						uni.showModal( {
							title: '提示',
							content: '服务器繁忙，请稍后再试',
							showCancel: false,
							success: function( res ) {}
						} );
					}
				} );
			},
			goback( ) {
				uni.navigateBack( {
					data: 1
				} )
			},
			zengjia( ) {
				this.$refs.popup.open( 'bottom' )
			},
			enter( ) {
				console.log( '点击了完成订单' )
			},
			pingjia( ) {
				uni.navigateTo( {
					url: '/pages/Message/pingjiapage/pingjiapage'
				} )
			},
			cancel( ) {
				var path = '/xyb/order/cancel';
				var data = {
					orderid: this.infodetails.id
				};
				ikz.post( path, data, res => {
					if ( res.data.code == 1 ) {
						uni.showToast( {
							title: '取消成功',
							duration: 2000
						} );
						that.$forceUpdate( );
					} else {
						uni.showModal( {
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function( res ) {}
						} );
					}
				} );
			},
		},
	}
</script>

<style lang="scss" scoped>
	.ikz-top-bg {
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: -1;
	}

	.popzengjia {
		width: 750rpx;
		height: 982rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 28rpx 0;
		box-sizing: border-box;

		.title {
			width: 150rpx;
			height: 44rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
			text-align: center;
			margin: 0 auto;
		}

		.inpbox {
			width: 634rpx;
			height: 116rpx;
			background: #F5F5F5;
			margin: 64rpx auto 48rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			display: flex;
			align-items: center;

			input {
				width: 100%;
				height: 100%;
				text-align: center;
			}
		}

		.enterbox {
			width: 314rpx;
			height: 88rpx;
			background: #247EFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: 0 auto;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
		}
	}

	.ikz-top-bg-img {
		width: 750rpx;
		height: 340rpx;
	}

	.title_txt {
		width: 100%;
		height: 48rpx;
		margin: 130rpx auto 0px;
		z-index: 2;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		box-sizing: border-box;

		.shouhuo {
			width: 218rpx;
			// height: 48rpx;
			min-height: 38rpx;
			display: flex;
			align-items: center;
			margin-left: 30rpx;

			.shtxt {
				width: 156rpx;
				min-height: 38rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #000000;
				text-align: left;
				margin-left: 8rpx;
			}
		}

		.miantxt {
			width: 128rpx;
			height: 48rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			text-align: center;
			margin-left: 50rpx;
		}
	}

	.statusbox {
		width: 100%;
		height: 182rpx;
		display: flex;
		padding: 44rpx 30rpx;
		box-sizing: border-box;

		.main-box {
			width: 482rpx;
			height: 96rpx;
			padding-left: 10rpx;
			box-sizing: border-box;

			.status-txt {
				width: 160rpx;
				height: 48rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				text-align: left;
			}

			.daotime {
				width: 368rpx;
				height: 36rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
				text-align: left;
			}
		}

		.btns {
			width: 156rpx;
			height: 52rpx;
			background: #247EFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 52rpx;
		}
	}

	.main-body {
		width: 100%;
		height: 1264rpx;
		background-color: #f5f5f5;
		padding-top: 16rpx;
		box-sizing: border-box;

		.shangjiabox {
			width: 690rpx;
			height: 154rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 22rpx 16rpx;
			box-sizing: border-box;
			margin: 16rpx auto;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.shangjianame {
				height: 38rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #000000;
				text-align: left;
				margin-left: 16rpx;
			}

			.btnssahng {
				width: 156rpx;
				height: 46rpx;
				border-radius: 22rpx 22rpx 22rpx 22rpx;
				border: 2rpx solid #247EFF;
				text-align: center;
				line-height: 46rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #247EFF;
				text-align: center;
			}
		}

		.dingdanbox {
			width: 690rpx;
			min-height: 496rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 22rpx 18rpx;
			box-sizing: border-box;
			margin: 16rpx auto;

			.titletxt {
				width: 100%;
				height: 36rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #000000;
				text-align: left;
			}

			.itemorderbox {
				width: 100%;
				height: 160rpx;
				display: flex;
				align-items: center;
				margin-top: 22rpx;

				.rightbox {
					width: 498rpx;
					height: 100%;
					padding-left: 10rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-direction: column;

					.topbox-box {
						width: 100%;
						min-height: 48rpx;
						font-weight: 400;
						font-size: 32rpx;
						color: #222222;
						text-align: left;
					}

					.price-box {
						width: 100%;
						height: 48rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.price-txt {
							width: 50%;
							height: 48rpx;
							font-weight: 400;
							font-size: 32rpx;
							color: #EC0000;
							text-align: left;
						}

						.num-txt {
							width: 50%;
							height: 36rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #EC0000;
							text-align: right;
						}
					}
				}
			}

			.hejibox {
				width: 100%;
				height: 104rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-weight: 400;
				font-size: 32rpx;
				color: #222222;
				text-align: right;
			}

			.peisongbox {
				width: 100%;
				height: 40rpx;
				margin-top: 26rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.peisongtxt {
					width: 50%;
					height: 40rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #222222;
					text-align: left;
				}

				.youhuinum {
					width: 50%;
					height: 40rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #AFAFAF;
					text-align: right;
				}

				.peisongnum {
					width: 50%;
					height: 40rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #222222;
					text-align: right;
				}
			}
		}

		.dancard {
			width: 690rpx;
			min-height: 502rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 0 auto;
			padding: 22rpx 18rpx;
			box-sizing: border-box;

			.topboxs {
				width: 100%;
				height: 64rpx;
				display: flex;
				align-items: center;


				.leftbox {
					width: 672rpx;
					height: 64rpx;
					display: flex;
					align-items: center;


					.namebox {
						width: 360rpx;
						height: 64rpx;
						margin-left: 10rpx;

						.txt-txt {
							width: 100%;
							height: 38rpx;
							font-weight: 500;
							font-size: 26rpx;
							color: #000000;
							text-align: left;
						}

						.time-txt {
							width: 100%;
							height: 34rpx;
							font-weight: 300;
							font-size: 22rpx;
							color: #AFAFAF;
							text-align: left;
						}
					}
				}

				.leixing-txt {
					height: 64rpx;
					background: #FFEDE8;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					// opacity: 0.1;
					font-weight: bold;
					font-size: 46rpx;
					color: #FF4F21;
					text-align: center;
					line-height: 64rpx;
					padding: 0 16rpx;
					box-sizing: border-box;
				}
			}

			.notesbox {
				width: 654rpx;
				min-height: 96rpx;
				background: #F5F5F5;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding: 10rpx;
				box-sizing: border-box;
				margin-top: 26rpx;

				.notes {
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
					text-align: left;
				}
			}

			.line {
				width: 654rpx;
				height: 1rpx;
				background: #F5F5F5;
				margin: 22rpx auto;
			}

			.qubox {
				width: 100%;
				min-height: 96rpx;

				.quhuobox {
					width: 100%;
					height: 64rpx;
					display: flex;
					align-items: center;
					margin-bottom: 6rpx;

					.qutxt {
						width: 64rpx;
						height: 64rpx;
						background: #F5F5F5;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						text-align: center;
						line-height: 64rpx;
					}

					.starsaddress {
						// width: 220rpx;
						height: 44rpx;
						font-weight: 500;
						font-size: 30rpx;
						color: #000000;
						text-align: left;
						margin-left: 10rpx;
					}
				}

				.leftline {
					width: 80%;
					height: 48rpx;
					border-left: 2rpx dashed #AFAFAF;
					margin-left: 32rpx;
				}

				.shouhuobox {
					width: 100%;
					height: 64rpx;
					display: flex;
					align-items: center;
					margin-top: 6rpx;

					.shoutxt {
						width: 64rpx;
						height: 64rpx;
						background: #247EFF;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						text-align: center;
						line-height: 64rpx;
						color: #FFFFFF;
					}

					.endaddress {
						height: 44rpx;
						font-weight: 500;
						font-size: 30rpx;
						color: #000000;
						text-align: left;
						margin-left: 10rpx;
					}
				}

				.qiwangbox {
					width: 100%;
					height: 38rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #FF4F21;
					text-align: left;
					margin-top: 14rpx;
				}

				.stattime {
					width: 100%;
					height: 44rpx;
					font-weight: 400;
					font-size: 30rpx;
					color: #FF4F21;
					text-align: left;
				}

				.endtime {
					width: 100%;
					height: 44rpx;
					font-weight: 400;
					font-size: 30rpx;
					color: #FF4F21;
					text-align: left;
					margin-top: 22rpx;
				}

				.xiangqing {
					width: 100%;
					height: 44rpx;
					font-weight: 400;
					font-size: 30rpx;
					color: #FF4F21;
					text-align: left;
				}
			}

			.bom-bom {
				width: 100%;
				height: 64rpx;
				display: flex;
				align-items: center;

				.let-box {
					width: 50%;
					height: 64rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.sixin {
						width: 104rpx;
						height: 38rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #000000;
						text-align: left;
						margin-left: 8rpx;
					}
				}

				.right-box {
					width: 50%;
					height: 64rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.phones {
						width: 104rpx;
						height: 38rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #000000;
						text-align: left;
						margin-left: 8rpx;
					}
				}
			}

		}

		.waimaibox {
			width: 690rpx;
			height: 236rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 22rpx 16rpx;
			box-sizing: border-box;
			margin: 16rpx auto;

			.quhuobox {
				width: 100%;
				height: 64rpx;
				display: flex;
				align-items: center;
				margin-bottom: 6rpx;

				.qutxt {
					width: 64rpx;
					height: 64rpx;
					background: #F5F5F5;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					text-align: center;
					line-height: 64rpx;
				}

				.starsaddress {
					// width: 220rpx;
					height: 44rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
					text-align: left;
					margin-left: 10rpx;
				}
			}

			.leftline {
				width: 80%;
				height: 48rpx;
				border-left: 2rpx dashed #AFAFAF;
				margin-left: 32rpx;
			}

			.shouhuobox {
				width: 100%;
				height: 64rpx;
				display: flex;
				align-items: center;
				margin-top: 6rpx;

				.shoutxt {
					width: 64rpx;
					height: 64rpx;
					background: #247EFF;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					text-align: center;
					line-height: 64rpx;
					color: #FFFFFF;
				}

				.endaddress {
					height: 44rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
					text-align: left;
					margin-left: 10rpx;
				}
			}

		}

		.order-box {
			width: 690rpx;
			min-height: 150rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 22rpx 16rpx;
			box-sizing: border-box;
			margin: 16rpx auto;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: space-between;

			.itemorder {
				width: 100%;
				min-height: 38rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.lefttxt {
					width: 50%;
					height: 38rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #222222;
					text-align: left;
				}

				.numtxt {
					width: 50%;
					min-height: 38rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					text-align: right;
				}
			}
		}

		.shangjiabox {
			width: 690rpx;
			height: 154rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 22rpx 16rpx;
			box-sizing: border-box;
			margin: 16rpx auto;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.shangjianame {
				height: 38rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #000000;
				text-align: left;
				margin-left: 16rpx;
			}

			.btnssahng {
				width: 156rpx;
				height: 46rpx;
				border-radius: 22rpx 22rpx 22rpx 22rpx;
				border: 2rpx solid #247EFF;
				text-align: center;
				line-height: 46rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #247EFF;
				text-align: center;
			}
		}

		.statuss {
			width: 100%;
			height: 38rpx;
			font-weight: 500;
			font-size: 26rpx;
			color: #000000;
			text-align: center;
			margin: 40rpx auto;
		}

		.jiedanpop {
			width: 690rpx;
			height: 154rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 40rpx auto;
			display: flex;
			align-items: center;
			padding: 22rpx 16rpx;
			box-sizing: border-box;

			.nametxt {
				width: 324rpx;
				height: 38rpx;
				font-weight: bold;
				font-size: 26rpx;
				color: #000000;
				text-align: left;
				margin-left: 16rpx;
			}

			.caozuobox {
				width: 224rpx;
				height: 38rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.sixin {
					width: 104rpx;
					height: 46rpx;
					border-radius: 22rpx 22rpx 22rpx 22rpx;
					border: 2rpx solid #247EFF;
					font-weight: 400;
					font-size: 26rpx;
					color: #247EFF;
					text-align: center;
					line-height: 46rpx;
				}

				.phones {
					width: 104rpx;
					height: 46rpx;
					border-radius: 22rpx 22rpx 22rpx 22rpx;
					border: 2rpx solid #247EFF;
					font-weight: 400;
					font-size: 26rpx;
					color: #247EFF;
					text-align: center;
					line-height: 46rpx;
				}
			}
		}

		.order-box {
			width: 690rpx;
			min-height: 150rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 22rpx 16rpx;
			box-sizing: border-box;
			margin: 0 auto;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: space-between;

			.itemorder {
				width: 100%;
				min-height: 38rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.lefttxt {
					width: 40%;
					height: 38rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #222222;
					text-align: left;
				}

				.numtxt {
					width: 60%;
					min-height: 38rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					text-align: right;
				}
			}
		}

		.btns-boxs {
			width: 750rpx;
			height: 176rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;

			.pingjiatxt {
				width: 314rpx;
				height: 88rpx;
				background: #247EFF;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 88rpx;
				margin-left: 30rpx;
			}

			.shenqign {
				width: 314rpx;
				height: 88rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				border: 2rpx solid #247EFF;
				font-weight: 400;
				font-size: 30rpx;
				color: #247EFF;
				text-align: center;
				line-height: 88rpx;
				margin-left: 62rpx;
			}

			.quxiaotxt {
				width: 204rpx;
				height: 88rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				border: 2rpx solid #AFAFAF;
				font-weight: 400;
				font-size: 30rpx;
				color: #AFAFAF;
				text-align: center;
				line-height: 88rpx;
				margin-left: 30rpx;
			}

			.wanchengding {
				width: 470rpx;
				height: 88rpx;
				background: #247EFF;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 88rpx;
				margin-left: 16rpx;
			}


			.jiedan {
				width: 690rpx;
				height: 88rpx;
				background: #247EFF;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				margin: 14rpx auto;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 88rpx;
			}

			.myquxiaobox {
				width: 314rpx;
				height: 88rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				border: 2rpx solid #247EFF;
				font-weight: 400;
				font-size: 30rpx;
				color: #247EFF;
				text-align: center;
				line-height: 88rpx;
				margin-left: 30rpx;
			}

			.myzengjiabox {
				width: 314rpx;
				height: 88rpx;
				background: #247EFF;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 88rpx;
				margin-left: 62rpx;
			}
		}
	}
</style>